package com.noocodecommit.wicket.jquery.plugin.ui.datepicker;

import java.util.Locale;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.Model;

import com.noocodecommit.wicket.jquery.TemplatePage;
import com.noocodecommit.wicket.stuff.jquery.JQCore;
import com.noocodecommit.wicket.stuff.jquery.plugin.chili.JQChili;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.datepicker.JQDatePicker;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.datepicker.JQDatePickerOptions;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.datepicker.JQDatePickerUtils;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.datepicker.OnDateSelectBehavior;
import com.noocodecommit.wicket.stuff.jquery.plugin.ui.tabs.JQTabs;

public class DatePickerPage extends TemplatePage
{

	private static final long serialVersionUID = 1L;
	private final JQTabs tabContainer;

	public DatePickerPage()
	{
		super();
		JQCore.init(this);
		this.setupChili();

		tabContainer = new JQTabs("tab-container");
		tabContainer.setOutputMarkupId(true);
		add(tabContainer);

		TextField datetext0 = new TextField("datetext0");
		datetext0.setOutputMarkupId(true);
		tabContainer.add(datetext0);

		JQDatePicker datepicker0 = JQDatePickerUtils.create("datepicker0", datetext0).showOn(JQDatePickerOptions.SHOWON_BOTH).buttonImage("images/calendar.png").buttonImageOnly(true).regional(Locale.FRENCH).build();
		tabContainer.add(datepicker0);

		/**
		 * 
		 */
		TextField datetext1 = new TextField("datetext1");
		datetext1.setOutputMarkupId(true);
		tabContainer.add(datetext1);

		JQDatePicker datepicker1 = new JQDatePicker("datepicker1", datetext1);
		datepicker1.setOutputMarkupId(true);
		datepicker1.getOptions().setRangeSelect(true);
		datepicker1.getOptions().setShowOn(JQDatePickerOptions.SHOWON_BOTH);
		datepicker1.getOptions().setButtonImage("images/calendar.png");
		datepicker1.getOptions().setButtonImageOnly(true);
		datepicker1.getPlugin().setRegional(Locale.FRENCH);
		tabContainer.add(datepicker1);

		final Label output1 = new Label("output1");
		output1.setOutputMarkupId(true);
		tabContainer.add(output1);

		datetext1.add(new OnDateSelectBehavior(datepicker1)
		{
			public void onSelect(AjaxRequestTarget target)
			{
				String msg = String.format("selected dates are '%s' and '%s'", this.getDatepicker().getStartDate(), this.getDatepicker().getEndDate());
				output1.setModel(new Model(msg));
				target.addComponent(output1);
			}
		});

		JQChili chili1 = new JQChili("chili1");
		add(chili1);
		this.bindChiliCode(chili1, this.getClass(), "html");

		JQChili chili2 = new JQChili("chili2");
		add(chili2);
		this.bindChiliCode(chili2, this.getClass(), "java");
		
		JQCore.get().bindOnDocumentReadyFunction();
	}
}
